<template>
    <div class="register-container">
      <h2>注册</h2>
      <el-form ref="registerForm" :model="registerForm" label-width="100px">
        <el-form-item label="账户名">
          <el-input v-model="registerForm.username"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input type="password" v-model="registerForm.password"></el-input>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input type="number" v-model="registerForm.age"></el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input type="tel" v-model="registerForm.phone"></el-input>
        </el-form-item>
        <el-form-item label="手机号验证码">
          <el-input type="text" v-model="registerForm.verificationCode"></el-input>
          <el-button @click="sendVerificationCode">发送验证码</el-button>
        </el-form-item>
        <el-form-item label="学信网照片">
          <el-upload
            action="#"
            :show-file-list="false"
            :on-success="handleUploadSuccess('xuexinPhoto')"
            :on-error="handleUploadError('xuexinPhoto')"
          >
            <el-button type="primary">上传</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="身份证照片">
          <el-upload
            action="#"
            :show-file-list="false"
            :on-success="handleUploadSuccess('idCardPhoto')"
            :on-error="handleUploadError('idCardPhoto')"
          >
            <el-button type="primary">上传</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleRegister">注册</el-button>
        </el-form-item>
      </el-form>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue'
  import { useRouter } from 'vue-router'
  
  const router = useRouter()
  
  const registerForm = ref({
    username: '',
    password: '',
    age: 0,
    phone: '',
    verificationCode: '',
    xuexinPhoto: null,
    idCardPhoto: null
  })
  
  const sendVerificationCode = () => {
    // 这里替换为实际的发送验证码API调用
    // 示例：假设后端API为 /api/sendVerificationCode
    // const response = await fetch('/api/sendVerificationCode', {
    //   method: 'POST',
    //   headers: { 'Content-Type': 'application/json' },
    //   body: JSON.stringify({ phone: registerForm.value.phone })
    // })
    // const data = await response.json()
    // if (!data.success) {
    //   // 处理错误
    // }
  
    // 模拟验证码发送成功
    console.log('验证码已发送')
  }
  
  const handleUploadSuccess = (field) => (response) => {
    registerForm.value[field] = response.url // 假设后端返回文件URL
  }
  
  const handleUploadError = (field) => () => {
    console.log(`${field} 上传失败`)
  }
  
  const handleRegister = async () => {
    // 这里替换为实际的注册API调用
    // 示例：假设后端API为 /api/register
    // const response = await fetch('/api/register', {
    //   method: 'POST',
    //   headers: { 'Content-Type': 'application/json' },
    //   body: JSON.stringify(registerForm.value)
    // })
    // const data = await response.json()
    // if (data.success) {
    //   router.push('/login')
    // } else {
    //   // 处理错误
    // }
  
    // 模拟注册成功
    router.push('/login')
  }
  </script>
  
  <style scoped>
  .register-container {
    max-width: 600px;
    margin: 50px auto;
    padding: 20px;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
  }
  </style>